<template>
  <div class="form-textarea">
    <textarea :id="`form_${field.fieldName}`"  ref="textareaRef" @input="input" :value="value" rows="2" :placeholder="placeholderText()" :disabled="disabled" :maxlength="field.maxlength ? field.maxlength : maxlength" autocomplete="off"></textarea>
    <span class="form-textarea-summary" :style="{right: `${offsetRight}px`}">{{summary}}</span>
  </div>
</template>

<script>
import {getScrollBarWidth} from '@src/util/dom';
import FormMixin from '@src/component/form/mixin/form';
import { genPlaceholder} from '../../util'

const DEFAULT_MAX_LENGTH = 2000

export default {
  name: 'form-textarea',
  mixins: [FormMixin],
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    maxlength() {
      if (this.field?.setting?.isLimitWord) {
        const max = this.field.setting.limitWordMax
        if (max) return max
      }
      return DEFAULT_MAX_LENGTH
    },
    summary(){
      let length = this.value ? this.value.length : 0;
      const maxlength = this.field?.maxlength || this.maxlength;

      return `${length}/${maxlength}`
    },
    offsetRight(){
      return getScrollBarWidth() + 4;
    }
  },
  methods:{
    placeholderText() {
      if (this.field?.setting?.isLimitWord) {
        this.field.maxlength = this.maxlength;
      }
      return genPlaceholder(this.field) ?? '';
    }
  }
}
</script>

<style lang="scss">
.form-textarea{
  width: 100%;
  position: relative;

  textarea{
    width: 100%;
    padding: 3px 10px 16px 10px;
    &:disabled{
      -webkit-text-fill-color: #BFBFBF;
      border-color: #D9D9D9;
      background-color:#f5f5f5;
      &:hover{
        border-color: #D9D9D9;
      }
    }
  }
}

.form-textarea-summary{
  position: absolute;
  font-size: 12px;
  line-height: 12px;
  bottom: 2px;
  color: #9a9a9a;
  background-color: #fff;
  z-index: 1;
}
</style>

